/*
 * Author： Lee
 * Create Time: 2018-02-01
 * Description: Horizontal pipe，水平管道，管道内水流颜色自定义，长度自定义，高度自定义。
 * CopyRight:
 * 利用整体状态去控制管道是空还是有水流
 * */


import React, { Component } from 'react';

import './index.css';

export default class HorizontalPipe extends Component {
  constructor(props) {
    super(props);
    console.log('HorizontalPipe props,', this.props);
    /*
     * * props 参数说明
     * x：相对位置x坐标
     * y: 相对位置y坐标
     * width： 宽度
     * height：高度
     * color: 水流颜色
     * 管道的默认颜色 #949494
     * state状态表示，是否有水流, 默认颜色： #1830fb
     * */
    this.state = {
      fill: this.props.fill ? this.props.fill : false,
    };
  }

  render() {
    return (
      <svg className="HorizontalPipeBox" label={this.props.label ? this.props.label : 'HorizontalPipe'} x={this.props.x ? this.props.x : '200'} y={this.props.y ? this.props.y : '200'} width={this.props.width ? this.props.width : '100'} height={this.props.height ? this.props.height : '100'}>
        <svg className="HorizontalPipeContent" viewBox="0 0 100 100">
          <rect x="0%" y="30%" width="100%" height="40%" fill="#949494" >
          </rect>
          <g style={{ display: this.state.fill ? 'block' : 'none' }}>
            <rect x="0%" y="40%" width="100%" height="20%" fill={this.props.color ? this.props.color : '#1830fb'} >
            </rect>
          </g>
        </svg>
      </svg>
    );
  }
}
